<template>
  <Card v-style="'boxstyle_bg_1'" title="竞争趋势">
    <div id="main" ref="main"></div>
  </Card>
</template>

<script lang="ts" setup>
import Card from "@/components/Card";
import { onMounted, ref, defineProps, toRefs, watch } from "vue";
import * as echarts from "echarts";
import { echartsAutoPlay } from "@/utils/echarts";
import { bigDataApi } from "@/api/bigData";
import store from "@/store";
const main = ref();

let selectWord = ref('');


const porps = defineProps({
  keyword: {
    type: String,
    default: ''
  }
})

const { keyword } = toRefs(
  porps
);

watch(
  keyword,
  (e) => {
    console.log(e)
    selectWord = e
    if(e){
      getList()
    }
  },
  {
    immediate: true,
  }
);

async function getList() {
  const result = await bigDataApi.detail({
    token: store.getters.user.token,
    keyword: selectWord
  });
  const { data } = result;
  setEcharts(data['competitive_trend']);
}

onMounted(() => {
  // setEcharts();
});
function setEcharts(data) {
  var dayData = data['period']
  var dataList = data['data']
  var myChart = echarts.init(main.value);
  var option = {
    tooltip: {
      trigger: "axis",
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)"
    },
    grid: {
      top: 10,
      left: 0,
      right: "5%",
      bottom: "0",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dayData,
      axisLabel: {
        rotate: 15,
        textStyle: {
          color: "#CBD2D5",
        },
        interval: 0,
        margin: 20,
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      axisLabel: {
        textStyle: {
          color: "#CBD2D5",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#222324",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        data: dataList,
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#0E9CFF",
        },
        itemStyle: { opacity: 0 },
      },
    ],
  };

  myChart.setOption(option);
  echartsAutoPlay(option,myChart)
}
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
